// pages/tdmap/tdmap.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  switchEditable() {
    if (!this._map) return;
    this._map.setEditablePolylinesEnabled(!this._map.getEditablePolylinesEnabled());
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const container = this.selectComponent('#td-leafletwx')
    let min_zoom = 1
    let max_zoom = 18
    var that = this;
    container.initLeafletMap(function(L) {      
      wx.leaflet ??= {}
      wx.leaflet.L = L;
      require('./leaflet-editable-polyline')
      var map = L.map(container,  {
        minZoom: min_zoom,
        maxZoom: max_zoom,
      })
      that._map = map;
      L.tileLayer('http://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=56b81006f361f6406d0e940d2f89a39c', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }).addTo(map)
      // L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { subdomains: "1234" }).addTo(map)
      // return;

      // 添加marker
      let m = L.marker([31.2948516,120.625814], {
        src: 'https://cdn.bootcdn.net/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',
        width: 32,
        height: 32,
        title: '我可以移动',
        showFooter: true,
        showInCenter: false,
        footerPosition: 1,  // 0：左 1:右 2：上 3：下
        showInCenter: true, // ture: 图标中心在POI中心 false：图标下边缘中心位于POI中心
        titleStyle: 'width: max-content!important;height: max-content!important;font-size: 9px!important;margin-top: 16px;!important',
        draggable: true
      }).addTo(map);

      function addPolyline(coordinates, fill, polygonMode) {
        var polylineOptions = {
          // The user can add new polylines by clicking anywhere on the map:
          newPolylines: true,
          newPolylineConfirmMessage: '增加一条新的轮廓?',
          // Show editable markers only if less than this number are in map bounds:
          maxMarkers: 100,
          fill: fill,
          polygonMode: polygonMode,
        }

        var polyline = L.Polyline.PolylineEditor(coordinates, polylineOptions).addTo(map);

        var dumpPoints = function() {
          map.getEditablePolylines().forEach(function(polyline) {
            var points = polyline.getPoints();
            points.forEach(function(point) {
                var latLng = point.getLatLng();
                console.log(latLng);
            });
          });
        };
        return polyline;
      }

      var coordinates1 = [[31.293516,120.625814], [31.294516,120.625214], [31.294516,120.626114]];
      var polyline1 = addPolyline(coordinates1, true, true);
      var coordinates2 = [[31.2930616,120.624814], [31.293616,120.625314], [31.2930516,120.626214]];
      var polyline2 = addPolyline(coordinates2, false, false);

      map.fitBounds(polyline1.getBounds());

      /* Check that markers are not left after the polyline is removed! */
      var resetPolyline = function() {
          map.removeLayer(polyline);
          setTimeout(() => {
            var polyline1 = addPolyline();
            var polyline2 = addPolyline();
          }, 500);
      };
    });

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})